<template>
<!-- 商品分类 -->
  <div class="lpk_sort">
    <!-- 页头搜索 -->
    <form action="/">
      <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" shape="round">
        <template #left>
          <van-image
            width="20"
            height="20"
            src="/images/tubiao/more.png" @click="showPopup"
          />
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <!-- 左侧隐藏框 -->
    <div>
      <van-popup v-model="show" position="left"  class="choose" close-on-click-overlay>
        <!--系列  -->
        <lpk-pop :text="tex1"></lpk-pop>
        <lpk-fan :arr8fan="arr8" @update="update"></lpk-fan>
        <!-- 类别 -->
        <lpk-pop :text="tex2"></lpk-pop>
        <van-checkbox-group v-model="result1">
          <van-checkbox name="a0">电子卡</van-checkbox>
          <van-checkbox name="a1">实体卡</van-checkbox>
        </van-checkbox-group>
        <!-- 适用场所 -->
        <lpk-pop :text="tex3"></lpk-pop>
        <van-checkbox-group v-model="result2">
            <van-checkbox name="b0">节日</van-checkbox>
            <van-checkbox name="b1">生日</van-checkbox>
            <van-checkbox name="b2">结婚</van-checkbox>
            <van-checkbox name="b3">答谢</van-checkbox>
            <van-checkbox name="b4">祝福</van-checkbox>
            <van-checkbox name="b5">商务</van-checkbox>
        </van-checkbox-group>
        <!-- 送礼对象 -->
        <lpk-pop :text="tex4"></lpk-pop>
        <van-checkbox-group v-model="result3">
            <van-checkbox name="c0">朋友</van-checkbox>
            <van-checkbox name="c1">爱人</van-checkbox>
            <van-checkbox name="c2">员工</van-checkbox>
            <van-checkbox name="c3">父母</van-checkbox>
            <van-checkbox name="c4">长辈</van-checkbox>
            <van-checkbox name="c5">宝贝</van-checkbox>    
        </van-checkbox-group> 
        <div class="anniu">
          <van-button square type="primary">重置</van-button>
          <van-button square type="danger">提交</van-button>
        </div>
      </van-popup>
      
    </div>
    <!-- 主页商品 -->
      <div id="recommend">
        <div class="rec-content">
          <div class="art-card" v-for="(item, i) of arr9" :key="i">
          <div>
            <van-image
                :src="`${baseURL}/jd_card/goods/${item.gpic}`"
                alt=""
              />
              <p class="card-title">
                {{ item.gtitle }}
              </p>
              <div class="pj">
                <p class="card-price">￥{{ item.gprice }}</p> 
                <div>
                  <lpk-zjjg :item="item"></lpk-zjjg>
                </div>
              </div> 
           </div>
          </div>
        </div>
     </div>
  </div>
</template>

<script>
import {Get,Post} from '../gp.js'
export default {
  data() {
    return {
      value:'',
      arr:[],
      show:false,
      tex1:"系  列",//"类别","适用场所","送礼对象"
      tex2:"类  别",
      tex3:"适用场所",
      tex4:"送礼对象",
      result1:[],
      result2:[],
      result3:[],
      arrall:[],
      arr8:[],
      arrleft:[],
      arr9:[]
    }
  },
  mounted(){
    let url='/goods';
    let data={};
    Get(url,data).then((res)=>{
      this.arr8=res.data.data;
      console.log(this.arr8);
      this.arr9=this.arr8;
    });
  },
  methods:{
    goto() {
      this.$router.push(`${herf}`);
    },
    update(item){
      console.log(item);
      this.arr9=[];
      this.arr8.forEach((e)=>{
        if(e[item]==1){
          this.arr9.push(e);
        }
      })
      console.log(this.arr8)
    },
    onSearch(){},
    showPopup(){
       this.show = true;
    }
  }
};
</script>
<style scoped lang='scss'>
 ::-webkit-scrollbar {
	/*隐藏滚轮*/
	display: none !important;
}
  .lpk_sort{
    // 搜索
      .van-search{
       ::v-deep >div{
           margin-right: 20px;
         }   
        ::v-deep .van-search__content {
          margin-right: 10px;
        }
        ::v-deep .van-search__action {
          margin-right: 10px;
        }
      }
    ::v-deep .van-popup{
      width: 80%;
      height: 100vh;
      // padding-right: 5px;
      overflow: hidden;
      background-color: #fff;
      border-radius: 0 10px 10px 0;
      position: absolute;
      .pop{
          transform: translateX(100px);
          margin-top: 20px;
          z-index: 20;
        .lines-btn{
          svg{
            width: 110px;
            height: 30px;
          }
        }
      }
      :nth-child(2){
        z-index: 1;
        // transform: translateY(-10px);
      }
    }
    .choose{
      // background-image: url("/images/self/sortpg.jpg");
      background-color: rgba(255, 255, 255, 0.9);
      overflow: hidden;
      overflow-y: scroll;
    }
    .pop{
      height: 40px;
      color:	gray;
    }
    
    .van-checkbox-group{
      width: 100%;
      // background-color: pink;
      ::v-deep span{
        font-family:'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 1rem;
        color:	gray;
        position:relative;
        top:-4px;
      }
      >div{
        display: inline-block;
        width: 50%;
        text-align: center;
        
        // display: flex;
        // flex-direction: column;
        // justify-content: space-around;
        ::v-deep .van-checkbox__icon{
          i{
            display: block;
            margin: 0 5px;
            border-radius: 0;
            width: 100%;
            height:30px;
            // background-color: none;
            position:relative;
            transform: translateY(10px);
            border: 0;
            background-color: none !important;
          }
        }
        ::v-deep .van-checkbox__icon--checked .van-icon{
            color: rgba(223, 222, 219,0);
            background-color: rgba(223, 222, 219,0) !important;
            border-radius: 5px 5px;
            box-shadow: -1px 1px 5px #ccc inset;
            background-image: linear-gradient(90deg,#9c9c9c,#dfdfdf 63%,#f8f5f5);
            opacity: 0.4;
          }
      }
    }
    .anniu{
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      .van-button--primary{
        background-color: rgb(175, 181, 197);
      }
      .van-button--danger{
        background-color: rgb(250, 104, 112);
      }
      button{
        width: 50%;
        border: 0;
      }
    }
  }
  #recommend {
  background-color: transparent;
  padding-bottom: 0;
  padding: 0.625rem 0 0.3125rem;
  position: relative;
  background-color: #f5f5f5;
  .rec-tit {
    position: relative;
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    padding-left: 0.84375rem;
  }
  .rec-tit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.25rem;
    height: 100%;
    background-color: #f23030;
  }
  .rec-content {
    width: 100%;
    padding: 0;
    font-size: 0;
    margin-top: 0.5625rem;
    .art-card {
      display: inline-block;
      width: 50%;
      margin-top: .06rem;
      margin-right: 0 !important;
      margin-bottom: .16rem;
      padding: 0.78125rem 0.71875rem 0.78125rem 0.75rem;
      position: relative;
      background-color: #fff;
      // border: 1px solid rgb(212, 212, 209);
      box-shadow: 1px 1px 1px rgb(218, 217, 216),-1px 1px 1px rgb(196, 195, 194);
      border-radius:  0.6125rem;
      box-sizing: border-box;
        .van-image {
          img{
            width: 10rem;
            height: 10rem;
          }
          
        }
        .card-title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #251d1d;
          line-height: 1rem;
          padding: 0 0.625rem;
          text-align: left;
          font-size: .85rem;
          margin-bottom: 0.625rem;
          margin-top: 0.5rem;
          white-space: normal;
        }
        
        .pj{
          width: 100%;
          display: flex;
          justify-content: space-between;
          .card-price {
            margin: 0 0 0.3125rem 0;
            padding: 0 0.625rem;
            text-align: left;
            color: #ec3838;
            font-size: 1.425rem;
            // font-weight: bold;
          }
          
        }
       
      .add-car {
        position: absolute;
        margin: 0;
        width: 2.5rem;
        height: 2.5rem;
        right: 0.375rem;
        bottom: 0.375rem;
        background: url("/images/tubiao/addcar.png") no-repeat
          center center;
        background-size: 1.625rem 1.5625rem;
      }
    }
    .art-card:nth-child(2n + 1) {
      margin-right: 0.09375rem;
    }
  }
}
</style>


